<script setup>
import { ref } from 'vue';

const props = defineProps({
	dialogShow: {
		// 是否显示弹窗
		type: Boolean,
		default: false
	},
	dialogTitle: {
		// 弹窗标题
		type: String,
		default: ''
	},
	dialogContent: {
		// 弹窗内容
		type: String,
		default: ''
	},
	showOverlay: {
		// 是否显示遮罩层
		type: Boolean,
		default: true
	},
	showCloseBtn: {
		// 是否显示关闭按钮
		type: Boolean,
		default: true
	},
	showFooter: {
		// 是否显示底部按钮
		type: Boolean,
		default: true
	},
	cancelBtnText: {
		// 取消按钮文字
		type: String,
		default: '取消'
	},
	confirmBtnText: {
		// 确认按钮文字
		type: String,
		default: '确认'
	},
	closeOnPopstate: {
		// 是否允许点击遮罩层关闭
		type: Boolean,
		default: true
	}
});

const emit = defineEmits(['closeSDialog', 'confirmSDialog']);

// 点击遮罩层关闭弹窗
const closeSDialogByOverlay = () => {
	if (props.closeOnPopstate) emit('closeSDialog');
};

// 关闭弹窗
const closeSDialog = () => {
	emit('closeSDialog');
};

// 确认弹窗
const confirm = () => {
	emit('confirmSDialog');
};
</script>

<template>
	<u-mask :show="dialogShow" @click="closeSDialogByOverlay" z-index="99999">
		<view class="dialog-wrapper" @click.stop>
			<view class="dialog-title-box">
				<view class="dialog-title">{{ dialogTitle }}</view>
				<image v-if="showCloseBtn" @click="closeSDialog" src="@/static/close-icon.png" class="close-icon"></image>
			</view>
			<view class="dialog-content">
				<slot name="dialogContent">
					{{ dialogContent }}
				</slot>
			</view>
			<view v-if="showFooter" class="dialog-footer">
				<view @click="closeSDialog" class="cancel button">{{ cancelBtnText }}</view>
				<view class="line"></view>
				<view @click="confirm" class="confirm button">{{ confirmBtnText }}</view>
			</view>
		</view>
	</u-mask>
</template>

<style lang="scss" scoped>
.dialog-wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	width: 630rpx;
	background-color: #fff;
	border-radius: 24rpx;
	box-shadow: 0rpx 4rpx 24rpx 4rpx #0085790f;
	
	.dialog-title-box {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 100rpx;
		background: linear-gradient(180deg, rgba(0, 197, 130, 0.12) 0%, rgba(0, 197, 130, 0) 100%);
		
		.dialog-title {
			color: #333;
			font-family: PingFang SC;
			font-size: 32rpx;
			font-weight: 500;
			line-height: 44rpx;
			text-align: center;
		}
		
		.close-icon {
			position: absolute;
			top: 30rpx;
			right: 24rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}

	.dialog-content {
		color: #999;
		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 48rpx;
		text-align: center;
	}

	.dialog-footer {
		position: relative;
		display: flex;
		border-top: 2rpx solid #f0f0f0;
		margin-top: 24rpx;

		.button {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 120rpx;
			color: #333;
			font-family: PingFang SC;
			font-size: 32rpx;
			font-weight: 400;
			line-height: 44rpx;
		}

		.line {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 2rpx;
			height: 56rpx;
			background-color: #f0f0f0;
		}
	}
}
</style>